<template>
  <div class="my-product">
    <p>索引:{{ index }}</p>
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="sub">是兄弟就来砍胡胡</button>
  </div>
</template>

<script>
export default {
  //  在props中定义的数据,就像data中的数据一样使用
  props: ["title", "price", "info", "index"],
  methods: {
    sub() {
      //   将数据传递给父组件,让父组件帮我砍价
      // 触发父组件给我绑定的自定义事件
      // this.$emit(事件名,数据1,数据2,数据3...)
      this.$emit("subprice", this.index, Math.random() * 2);
    },
  },
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>